<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  .standard-box {
    width: 200px;
    padding: 20px;
    border: 5px solid #f00;
    margin: 30px;
    background: #ffe;
  }

  .border-box {
    box-sizing: border-box; /* 关键区别 */
    width: 200px;
    padding: 20px;
    border: 5px solid #00f;
    margin: 30px;
    background: #eef;
  }
</style>
</head>
<body>
    <!-- 标准盒子 -->
    <!-- 内到外，content,padding,border,margin -->
     <!-- padding: 10px;            /* 四边相同 */
     padding: 5px 10px;        /* 上下 | 左右 */
     padding: 5px 10px 15px;   /* 上 | 左右 | 下 */
     先上下
     padding: 5px 10px 15px 20px; /* 上 右 下 左 */
     顺时针 -->
     <!-- 替代盒子 -->
      <div class="standard-box">标准模型</div>
      <div class="border-box">替代模型</div>
</body>
</html>